import React, { useState, useEffect } from "react";
import "./index.scss";
import {
  PageHeader,
  Input,
  Divider,
  Button,
  Table,
  Pagination,
  Switch,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
// import { renderRoutes } from "react-router-config";
// import { NavLink } from "react-router-dom";

//Header表头
const routes = [
  {
    path: "index",
    breadcrumbName: "设置",
  },
  {
    path: "first",
    breadcrumbName: "员工管理",
  },
];

//Content表格列数据
const columns = [
  {
    title: "员工姓名",
    dataIndex: "name",
    width: 200,
  },
  {
    title: "登录账号",
    dataIndex: "loginID",
  },
  {
    title: "角色",
    dataIndex: "role",
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 200,
  },
  {
    title: "添加人",
    dataIndex: "AddPeople",
  },
  {
    title: "添加时间",
    dataIndex: "AddTime",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];

//表格数据
const dataSource = [
  {
    key: "1",
    name: "王瑶",
    loginID: 15666000900,
    role: "管理员",
    status: <Switch />,
    AddPeople: "李红",
    AddTime: "2020/09/08 10:45",
    operation: 
      <div className="flex6">
        <div>
          <Button type="link" block>
            编辑
          </Button>
        </div>
        <div>
          <Button type="link" block>
            删除
          </Button>
        </div>
      </div>,
   
  },
  {
    key: "2",
    name: "王瑶",
    loginID: 15666000900,
    role: "管理员",
    status: <Switch />,
    AddPeople: "李红",
    AddTime: "2020/09/08 10:45",
    operation: 
      <div className="flex6">
        <div>
          <Button type="link" block>
            编辑
          </Button>
        </div>
        <div>
          <Button type="link" block>
            删除
          </Button>
        </div>
      </div>,
    
  },
  {
    key: "3",
    name: "王瑶",
    loginID: 15666000900,
    role: "管理员",
    status: <Switch />,
    AddPeople: "李红",
    AddTime: "2020/09/08 10:45",
    operation: 
      <div className="flex6">
        <div>
          <Button type="link" block>
            编辑
          </Button>
        </div>
        <div>
          <Button type="link" block>
            删除
          </Button>
        </div>
      </div>,
    
  },
  {
    key: "4",
    name: "王瑶",
    loginID: 15666000900,
    role: "管理员",
    status: <Switch />,
    AddPeople: "李红",
    AddTime: "2020/09/08 10:45",
    operation: 
      <div className="flex6">
        <div>
          <Button type="link" block>
            编辑
          </Button>
        </div>
        <div>
          <Button type="link" block>
            删除
          </Button>
        </div>
      </div>
  },
];

//表格页码
const onChange = (pageNumber) => {
  console.log("Page: ", pageNumber);
};

export default function Staff() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);


  const onSelectChange = (newSelectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //页码
  const showTotal = (total) => `数量 ${total} 条`;

  //跳转
  const Navigate = useNavigate();
  return (
    <>
      <div className="Header">
        <PageHeader
          className="site-page-header"
          title="员工管理"
          breadcrumb={{
            routes,
          }}
        />
        <Divider plain></Divider>
        <div className="flex1">
          <div className="Header-left">
            <span className="BannerName">员工姓名</span>
            <Input placeholder="请输入" size="middle" />
          </div>
          <div className="Header-right">
            <Button type="primary" className="queryBtn">
              查询
            </Button>
            <Button className="resetBtn">重置</Button>
          </div>
        </div>
      </div>
      <div className="Content ">
        <div className="flex2">
          <div className="Content-left">
            <h3 className="Advertising-Banner-List">员工列表</h3>
          </div>
          <div className="Content-right">
            <Button
              type="primary"
              className="newBtn"
              icon={<PlusOutlined />}
              onClick={() => {
                Navigate("/home/setting/staff/aboutStaff");
              }}
            >
              新建
            </Button>
            <Button className="batchBtn">批量操作</Button>
          </div>
        </div>

        <Table
          className={StyleSheet.rowStyle}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
          pagination={{
            total: dataSource.length,
            showTotal: showTotal,
            showSizeChanger: true,
            showQuickJumper: true,
          }}
        />
      </div>
    </>
  );
}
